<template>
  <el-dialog :title="`导入：${templateName}`" width="600px" @close="closeDialog">
    <div class="upload-container">
      <div class="upload-demo-box">
        <div class="upload-demo-text">
          1、 下载导入文件模板，请阅读模板中的填写规范，按要求填写和编辑内容。
        </div>
        <div class="upload-demo-img">
          <img src="@/assets/images//excel.jpg" alt="支持格式图标" />
          <div>支持xls, xlsx格式</div>
        </div>
        <div class="upload-demo-btn">
          <el-button @click="downloadTemplate">下载模板</el-button>
        </div>
      </div>
      <el-divider direction="vertical" style="height: auto;" />
      <div class="upload-demo-box">
        <div class="upload-demo-text">
          2、 上传填写好的文件。
        </div>
        <div class="upload-demo-img">
          <img src="@/assets/images//excel.jpg" alt="模板图片" />
          <div>支持xls, xlsx格式</div>
        </div>
        <div class="upload-demo-btn">
          <el-upload :action="uploadAction" :on-change="handleUploadChange" :before-upload="beforeUpload">
            <el-button class="upload-btn">上传文件</el-button>
          </el-upload>
        </div>
      </div>
    </div>

    <template v-slot:footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  templateName: string;
  templateUrl: string;
  uploadAction: string;
  dialogVisible: boolean;
}>();

const emits = defineEmits<{
  (event: 'close'): void;
  (event: 'ok'): void;
}>();

//点击弹窗取消按钮
const closeDialog = () => {
  emits('close'); // 发出 'close' 事件
};

//点击弹窗确定按钮
const confirmUpload = () => {
  emits('ok'); // 发出 'ok' 事件
};

//下载上传文件填写的模板
const downloadTemplate = () => {
  const link = document.createElement('a');
  link.href = props.templateUrl; // 模板文件路径
  link.download = `${props.templateName}模板` + '.xlsx'; // 模板文件名称
  link.click();
};

//上传文件
const handleUploadChange = (file: File) => {
  console.log("上传文件:", file);
};

const beforeUpload = (file: File) => {
  const isExcel = /\.(xls|xlsx)$/.test(file.name);
  if (!isExcel) {
    // 提示用户
    ElMessage.error('上传文件只能是 Excel 格式!');
  }
  return isExcel;
};
</script>

<style scoped lang="scss">
.upload-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  border: 1px solid #dcdfe6;
  padding: 1rem 0;

  .upload-demo-box {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .upload-demo-text {
      width: 80%;
      height: 30%;
      text-align: justify;
    }

    .upload-demo-img {
      width: 60%;
      height: 40%;
      padding: 1rem 0;
      box-sizing: border-box;
      text-align: center;

      img {
        width: 50%;
        margin-bottom: 0.5rem;
      }
    }

    .upload-demo-btn {
      padding: 1rem;
      margin-top: 1rem; // 按钮的间距

      :deep(.el-upload-list) {
        display: none;
      }
    }
  }
}

.dialog-footer {
  text-align: center;
}
</style>
